<template>
  <div class="notFound">
    <div class="big" @click="goLogin">
      <div class="one">#404#</div>
      <div class="two">#404#</div>
      <div class="three">#404#</div>
      <span>Click Me <i class="iconfont iconbtn_nav_back myicon"></i></span>
      <div class="three">OOPS!!!</div>
      <div class="two">OOPS!!!</div>
      <div class="one">OOPS!!!</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'notFound',
  methods: {
    goLogin () {
      this.$router.push('/my')
    }
  }
}
</script>

<style lang="less" scoped>
.notFound {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: rgb(255, 255, 255);
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-style: italic;
  .big {
    // box-sizing: border-box;
    padding: 20px 10px 28px 20px;
    width: 228px;
    border-radius: 60px 220px 240px 40px;
    background-color: rgba(228, 1, 55, 1);
    box-shadow: 16px 15px 12px 2px rgba(228, 60, 1, 0.4);
    // text-align: center;
    color: #fff;
    .one {
      font-size: 32px;
    }
    .two {
      font-size: 48px;
    }
    .three {
      font-size: 64px;
    }
    span {
      position: relative;
      font-size: 48px;
      .myicon {
        position: absolute;
        top: -14px;
        right: -76px;
        font-size: 80px;
        font-weight: bold;
      }
    }
  }
}
</style>
